const { resolve } = require('path')
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader还需这个
module.exports = {
    entry: path.join(__dirname, './src/main.js'), //入口，表示要用webpack打包哪个文件
    output: {
        path: path.join(__dirname, './dist'), //指定打包好的文件。输出到哪个目录
        filename: 'bundle.js' //指定输出文件的名称
    },
    mode: 'development',
    module: { //这个节点用于配置所有第三方加载器
        rules: [ //所有第三方的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理.css文件的第三方loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.jpg|png|gif|bmp|jpeg$/, use: 'url-loader?limit=7630&name=[hash:8]-[name].[ext]&esModule=false' }, //limit给定的值是图片的大小，单位是byte，若大于则不会被转换为base64格式的字符串，若小于等于则转换;name中表示不进行更名，之前什么名字还是什么名[name],之前什么后缀名还是什么后缀名[ext],取hash值前8位拼接到命名
            { test: /\.ttf|eot|svg|woff|woff2$/, use: 'url-loader' }, //处理字体文件也用url-loader
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //处理高级语法,但需要排除node_modules文件内的js文件，若不排除，则Babel将所有第三方js文件打包编译，消耗资源过大，即使打包完成也无法运行
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    plugins: [
        new VueLoaderPlugin() //vue正常使用还需这个
    ],
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js" //修改vue导入时，包的地址为vue.js而不是common.js
        }
    },
};
//Babel可以帮webpack将无法识别的ES6 7语法转换成低级语法，需安装如下包：
//npm i @babel/core babel-loader @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
//npm i @babel/preset-env @babel/preset-react -D